import React, { Component } from 'react'
import { Card, Button } from 'antd'
import './index.less'

class Buttons extends Component {
    state = {
        loading: false,
        iconLoading: false
    }
    enterLoading = () => {
        this.setState({
            loading: true
        })
    }
    enterIconLoading = () => {
        this.setState({
            iconLoading: true
        })
    }
    render() {
        return (
            <div>
                <Card title="按钮组件" className="card-wrap">
                    <Button className="button" type="primary">Primary</Button>
                    <Button className="button">Default</Button>
                    <Button className="button" type="dashed">Dashed</Button>
                    <Button className="button" type="danger">Danger</Button>
                </Card>
                <Card title="ICON按钮" className="card-wrap">
                    <Button className="button" type="primary" icon="poweroff">Primary</Button>
                    <Button className="button" icon="search">Default</Button>
                    <Button className="button" type="dashed" shape="circle" icon="download"/>
                    <Button className="button" type="danger" shape="circle" icon="search"/>
                </Card>
                <Card title="加载状态按钮" className="card-wrap">
                    <span>
                        <Button className="button" type="primary" loading>click me</Button>
                        <Button className="button" type="primary" loading={this.state.loading} onClick={this.enterLoading}>click me</Button>
                        <Button className="button" type="primary" icon="poweroff" loading={this.state.iconLoading} onClick={this.enterIconLoading}>click me</Button>
                    </span>
                    <br/>
                    <span>
                        <Button className="button" shape="circle" loading />
                        <Button className="button" shape="circle" type="primary" loading/>
                    </span>
                </Card>
            </div>
        )
    }
}
export default Buttons